<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>层级选择器</title>
</head>
<body>
<ul>
	<li>AAAAA</li>
	<li class="box">CCCCC</li>
	<li title="hello"><span>BBBBB</span></li>
	<li title="hello"><span class="box">DDDD</span></li>
	<span>EEEEE</span>
</ul>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
// 1.选中ul下所有的span
// $('ul span').css('background', 'red');

// 2.选中ul下所有的子元素span
// $('ul > span').css('background', 'red');

// 3.选中class为box的下一个li
// $('.box + li').css('background', 'red');

// 4.选中ul下li的class为box的元素后面的所有兄弟元素
$('ul .box ~ *').css('background', 'red');
</script>
</body>
</html>